<template>
  <div class="group">
    <div :class="{'group-title':true,'group-title__border':titleBorder}">
      <span class="title" v-if="listLength">
        {{title}}
         (<span class="num">{{listLength}}</span>)
      </span>
      <span class="title" v-else>
        {{title}}
      </span>

      <slot name="more"></slot>
      <span class="link-wrap" v-if="hasLink" style="float:right">
        <slot name="link"></slot>
      </span>
    </div>
    <slot></slot>
  </div>
</template>

<script>
  /**
   * 详情分组带标题layout
   * title String [''] - 标题文案
   * title-border Boolean [false] - 是否在标题下面划线
   * list-length String [''] - 内容数量
   * hasLink Boolean 是否有链接
   */
  export default {
    name: 'details-group',
    components: {},
    directives: {},
    mixins: [],
    props: {
      title: {
        type: String,
        default: ''
      },
      listLength: {
        type: Number,
        default: 0
      },
      titleBorder: {
        type: Boolean,
        default: false
      },
      hasLink: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {}
    },
    computed: {},
    watch: {},
    methods: {},
    created() {
    }
  }
</script>

<style scoped lang="scss">
  .group {
    margin: 0 1.2rem 0;
    &-title {
      padding: 1rem 0;
      text-align: left;
      &__border {
        margin-bottom: 1rem;
        border-bottom: 1px solid #eee;
      }
      > span.title {
        font-size: 1.05rem;
        padding-left: .6rem;
        border-left: 3px solid #45a3eb;
        color: #333;
        > .num {
          color: #f44646;
        }
      }
    }
  }
</style>
